<template>
  <view class="page">
    <view class="search-box">
      <uni-search-bar
          :focus="true"
          v-model="searchValue"
          @blur="blur"
          @focus="focus"
          @input="input"
          :radius="100"
          placeholder="搜索明星,演出"
          bgColor="#e7e7e7"
          @clear="clear"
          @cancel="clear"
      >
      </uni-search-bar>
    </view>
    <scroll-view v-show="doSearched" style="height: 100%" @scrolltolower="getList" scroll-y="true"
                 lower-threshold="100px">
      <concertList v-show="doSearched" :concertList="commonConcertList" :hasMore="hasMore"
                   :loading="loading"></concertList>
    </scroll-view>
    <view v-show="!doSearched" class="history-box">
      <view class="history-title">
        <view class="text">搜索历史</view>
        <uni-icons type="trash" size="17" @click="clean"></uni-icons>
      </view>
      <view class="history-list">
        <uni-tag
            @click="doSearch(item)"
            :text="item"
            :circle="true"
            :inverted="true"
            v-for="(item, i) in histories"
            :key="i"
        ></uni-tag>
      </view>
    </view>
  </view>
</template>

<script>
import concertList from "../../uni_modules/uni-badge/components/concert-list/concert-list.vue";
import {getConcertList} from "../../api/user/concert";

export default {
  components: {
    concertList
  },
  data() {
    return {
      searchValue: "",
      // 搜索防抖定时器
      timer: null,

      // 搜索历史的假数据
      historyList: [],
      commonConcertList: [],
      hasMore: true,
      loading: false,
      condition: {
        pageNum: 1,
        pageSize: 5,
      },
      doSearched: false,
    };
  },
  computed: {
    histories() {
      // 不要直接在push关键词的时候基于原数组调用reverse方法，每次调用都会修改原数组中元素的顺序---建立一个无关数组，每次都将元素组在push新的搜索词后调用reverse翻转数组
      return [...this.historyList].reverse();
    },
  },
  onLoad() {
    this.historyList = JSON.parse(uni.getStorageSync("kw") || "[]");
  },
  methods: {
    getList() {
      if (!this.hasMore) return;
      this.loading = true;
      getConcertList(this.condition).then(res => {
        this.commonConcertList = [...this.commonConcertList, ...res.data.rows]
        this.hasMore = this.condition.pageNum * this.condition.pageSize <= res.data.total;
        ++this.condition.pageNum;
        this.loading = false;
      })
    },
    blur(res) {
    },
    focus(e) {
    },
    clear() {
      this.commonConcertList = [];
      this.doSearched = false;
      this.condition = {
        pageNum: 1,
        pageSize: 5,
      }
      this.hasMore = true;
      this.loading = false;
    },
    input(e) {
      clearTimeout(this.timer);
      if (e === "") {
        return;
      }
      this.doSearched = true;
      // 定义一个定时器，当用户500ms没有触发新的输入事件，则为搜索关键词赋值，进行匹配搜索
      this.timer = setTimeout(() => {
        this.saveSearchHistory(e);
        this.commonConcertList = [];
        this.condition = {
          pageNum: 1,
          pageSize: 5,
          keyword: e,
        }
        this.hasMore = true;
        this.loading = false;
        this.getList();
      }, 500);
    },
    doSearch(keyword) {
      this.searchValue = keyword;
    },
    // 保存搜索关键词的方法
    saveSearchHistory(kw) {
      /*  // 直接把搜索关键词push到history数组中
      this.historyList.push(this.kw); */
      // 将Array数组转化为set对象
      const set = new Set(this.historyList);
      // 调用Set对象的delete方法，将set集合中与目前搜索词相同的value值删除
      set.delete(kw);
      // 向Set中添加搜索关键词----先删后加保证了搜索关键词的顺序
      set.add(kw);
      // 将set对象转化为Array数组
      this.historyList = Array.from(set);

      uni.setStorageSync("kw", JSON.stringify(this.historyList));
    },
    clean() {
      // _this拿到全局的this 这个this才能直接获取到data中的数据
      let _this = this;
      wx.showModal({
        title: "温馨提示",
        content: "确定要清空您的搜索历史吗",
        success(res) {
          //如果用户点击了确定按钮
          if (res.confirm) {
            // 一开始用this.historyList清空失败，因为这时的this指向的是showModal这个组件。不能通过这个this拿到data中的数据
            _this.historyList = [];
            uni.setStorageSync("kw", "[]");
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
.page {
  //height: 100%;
  width: 100%;
  padding: 5px 10px;
  box-sizing: border-box;
}

.search-box {
  position: sticky;
  top: 0;
  z-index: 99;
  background-color: white;
  border-bottom: 1px solid #efefef;
}

uni-search-bar {
  letter-spacing: 2px;
}

.history-box {
  padding: 0 5px;

  .history-title {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    font-size: 13px;
    // border-bottom: 1px solid #efefef;
  }

  .history-list {
    display: flex;
    flex-wrap: wrap;

    .uni-tag {
      margin-top: 5px;
      margin-right: 5px;
    }
  }
}
</style>
